<template>
  <div class="page_box">
    <ul>
      <!-- 这个是左箭头 -->
      <li @click="pageClickHandle(-1)">
        <i></i>
      </li>
      <li
        :class="{ active: item == currenPage }"
        v-for="item in pages"
        :key="item"
        @click="pageClickHandles(item)"
      >
        {{ item }}
      </li>
      <!-- 这个是右箭头 -->
      <li @click="pageClickHandle(1)">
        <i></i>
      </li>
    </ul>
  </div>
  <br /><br />
  <div>当前点击的页码是： {{ currenPage }}</div>
</template>
/* script内写setup是Vue3的新语法，你们可以自行查看文档 */
<script setup>
/* defineProps是vue3的新props语法糖  */
/* defineEmits是vue3的新emit语法糖  */
import { defineProps, defineEmits, ref, computed } from "vue";
const props = defineProps({
  modelValue: Number,
  total: Number,
});
const currenPage = ref(1);
const emit = defineEmits(["click", "delete", "update:modelValue"]);
const pageClickHandle = (val) => {
  if (currenPage.value >= props.total) return false;
  currenPage.value += val;
  if (currenPage.value <= 1) currenPage.value = 1;
  emit("update:modelValue", currenPage.value);
};
const pageClickHandles = (val) => {
  if (val === "···") return false;
  currenPage.value = val;
  emit("update:modelValue", currenPage.value);
};
const pages = computed(() => {
  if (props.modelValue <= 4) {
    return [1, 2, 3, 4, 5, 6, "···", props.total];
  } else if (props.modelValue >= props.total - 3) {
    return [
      1,
      "···",
      props.total - 5,
      props.total - 4,
      props.total - 3,
      props.total - 2,
      props.total - 1,
      props.total,
    ];
  } else {
    return [
      1,
      "···",
      props.modelValue - 2,
      props.modelValue - 1,
      props.modelValue,
      props.modelValue + 1,
      props.modelValue + 2,
      "···",
      props.total,
    ];
  }
  // return props.pages;
});
</script>
<style lang="scss" scoped>
@import "../assets/scss.scss";
/* 如果不想样式污染  就加个scoped */
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.page_box {
  ul {
    display: flex;
    align-items: center;
    li {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #666;
      margin-right: 10px;
      @include border;
      &.active {
        background-color: #000;
        color: #fff;
      }
    }
  }
}
</style>